<template>
  <div style="height: 100%">
    <el-row style="height: 78vh; background-color: black" :gutter="20">
      <el-col :span="24" style="height: 100%; background-color: white">
        <div class="header">
          <span style="margin-left: 20px">关键字</span>
          <el-input placeholder="关键字搜索" v-model="roleReq.keyword" style="width: 200px; margin-left: 10px"
            clearable></el-input>
          <el-button style="margin-left: 20px" size="small" @click="
            roleReq.pageIndex = 1
          getRoles()
            ">
            搜索
          </el-button>
          <el-button type="primary" style="margin-left: 20px" size="small" @click="
            newRole = { RL_Name: '', RL_Desc: '', Auths: [], SubmitFlows: [], SearchFlows: [] }
          addRoleVis = true
            ">
            新增角色
          </el-button>
        </div>
        <div class="main">
          <el-table style="overflow: auto" height="100%" :data="roleRes.Items" stripe border highlight-current-row
            @row-click="
              (row) => {
                currentRole = row
              }
            ">
            <el-table-column prop="RL_Name" label="角色名" width="150px"></el-table-column>
            <el-table-column prop="RL_Name" label="权限">
              <template slot-scope="scope">
                <el-tag v-for="s in scope.row.Auths" :key="s.PRA_ID">
                  {{ s.AUTH_Name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="RL_Name" label="操作" width="160px">
              <template slot-scope="scope">
                <el-button type="text" @click="
                  currentRole = scope.row
                modifyRoleVis = true
                  ">
                  修改
                </el-button>
                <el-button style="color: red" type="text" @click="removeRole(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%; height: 40px">
            <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
              :current-page.sync="roleReq.pageIndex" :total="roleRes.Total" :page-size="roleReq.pageSize"
              :page-sizes="[5, 10, 15]" @size-change="
                (val) => {
                  roleReq.pageSize = val
                  getRoles()
                }
              " @current-change="getRoles()"></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog top="20px" :visible.sync="addRoleVis" title="新增角色" :close-on-click-modal="false">
      <el-form v-if="newRole" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="newRole.RL_Name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="newRole.RL_Desc"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <div style="display: flex; flex-wrap: wrap;">
            <div v-for="item in auths" :key="item.AUTH_ID" style="margin-left: 20px;">
              <el-checkbox :value="newRole.Auths.findIndex((x) => x.RA_AuthId == item.AUTH_ID) !=
                -1
                " @change="
                  (ischecked) => {
                    roleAuthChange(newRole, item, ischecked)
                  }
                ">
                【{{ item.AUTH_Group }}】{{ item.AUTH_Name }}
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="审批查阅权限">
          <div style="display: flex; flex-wrap: wrap;">
            <div v-for="item in flows" :key="item.FLOW_ID" style="margin-left: 20px;">
              <el-checkbox :value="newRole.SearchFlows.findIndex((x) => x.FRL_FlowID == item.FLOW_ID) !=
                -1
                " @change="
                  (ischecked) => {
                    roleSearchFlowChange(newRole, item, ischecked)
                  }
                ">
                {{ item.FLOW_Name }}
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="审批查阅权限">
          <div style="display: flex; flex-wrap: wrap;">
            <div v-for="item in flows" :key="item.FLOW_ID" style="margin-left: 20px;">
              <el-checkbox :value="newRole.SubmitFlows.findIndex((x) => x.FRL_FlowID == item.FLOW_ID) !=
                -1
                " @change="
                  (ischecked) => {
                    roleSubmitFlowChange(newRole, item, ischecked)
                  }
                ">
                {{ item.FLOW_Name }}
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-button @click="addRole" type="primary">保存</el-button>
        <el-button @click="addRoleVis = false">取消</el-button>
      </el-form>
    </el-dialog>

    <el-dialog top="20px" :visible.sync="modifyRoleVis" title="编辑角色">
      <el-form v-if="currentRole" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="currentRole.RL_Name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="currentRole.RL_Desc"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <div style="display: flex; flex-wrap: wrap;">
            <div v-for="item in auths" :key="item.AUTH_ID" style="margin-left: 20px;">
              <el-checkbox :value="currentRole.Auths.findIndex(
                (x) => x.RA_AuthId == item.AUTH_ID
              ) != -1
                " @change="
                  (ischecked) => {
                    roleAuthChange(currentRole, item, ischecked)
                  }
                ">
                【{{ item.AUTH_Group }}】{{ item.AUTH_Name }}
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="审批查阅权限">
          <div style="display: flex; flex-wrap: wrap;">
            <div v-for="item in flows" :key="item.FLOW_ID" style="margin-left: 20px;">
              <el-checkbox :value="currentRole.SearchFlows.findIndex((x) => x.FRL_FlowID == item.FLOW_ID) !=
                -1
                " @change="
                  (ischecked) => {
                    roleSearchFlowChange(currentRole, item, ischecked)
                  }
                ">
                {{ item.FLOW_Name }}
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="审批发起权限">
          <div style="display: flex; flex-wrap: wrap;">
            <div v-for="item in flows" :key="item.FLOW_ID" style="margin-left: 20px;">
              <el-checkbox :value="currentRole.SubmitFlows.findIndex((x) => x.FRL_FlowID == item.FLOW_ID) !=
                -1
                " @change="
                  (ischecked) => {
                    roleSubmitFlowChange(currentRole, item, ischecked)
                  }
                ">
                {{ item.FLOW_Name }}
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-button @click="modifyRole" type="primary">保存</el-button>
        <el-button @click="modifyRoleVis = false">取消</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRoles,
  modifyRole,
  addRole,
  getAuths,
  removeRole,
  getCompanyFlows
} from '@/api/flowCenter/organiztion/roleManage'
export default {
  data: function () {
    return {
      roleReq: {
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
      },
      roleRes: {
        Items: [],
        Total: 0,
      },
      flows: [],
      auths: [],
      newRole: null,
      currentRole: null,
      addRoleVis: false,
      modifyRoleVis: false,
    }
  },
  methods: {
    roleAuthChange(role, auth, ischecked) {
      if (ischecked) {
        if (!role.Auths) {
          role.Auths = []
        }
        role.Auths.push({
          RA_AuthId: auth.AUTH_ID,
          RA_RoleId: role.RL_ID,
        })
      } else {
        role.Auths.splice(
          role.Auths.findIndex((x) => x.RA_AuthId == auth.AUTH_ID),
          1
        )
      }
    },
    roleSearchFlowChange(role, flow, ischecked) {
      if (ischecked) {
        if (!role.SearchFlows) {
          role.SearchFlows = []
        }
        role.SearchFlows.push({
          FRL_FlowID: flow.FLOW_ID,
          FRL_RoleID: role.RL_ID,
        })
      } else {
        role.SearchFlows.splice(
          role.SearchFlows.findIndex((x) => x.FRL_FlowID == flow.FLOW_ID),
          1
        )
      }
    },
    roleSubmitFlowChange(role, flow, ischecked) {
      if (ischecked) {
        if (!role.SubmitFlows) {
          role.SubmitFlows = []
        }
        role.SubmitFlows.push({
          FRL_FlowID: flow.FLOW_ID,
          FRL_RoleID: role.RL_ID,
        })
      } else {
        role.SubmitFlows.splice(
          role.SubmitFlows.findIndex((x) => x.FRL_FlowID == flow.FLOW_ID),
          1
        )
      }
    },
    getCompanyFlows: function () {
      getCompanyFlows().then(({ data }) => {
        this.flows = data
      })
    },
    getRoles: function () {
      getRoles(this.roleReq).then(({ data }) => {
        this.roleRes = data
      })
    },
    getAuths: function () {
      getAuths().then(({ data }) => {
        this.auths = data
      })
    },
    addRole() {
      addRole(this.newRole).then(({ data }) => {
        this.getRoles()
        this.addRoleVis = false
        this.newRole = { RL_Name: '', RL_Desc: '', Auths: [], SubmitFlows: [], SearchFlows: [] }
      })
    },
    modifyRole() {
      modifyRole(this.currentRole).then(({ data }) => {
        this.getRoles()
        this.modifyRoleVis = false
        this.currentRole = null
      })
    },
    removeRole(role) {
      this.$confirm('是否删除该角色', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          removeRole(role.RL_ID).then(({ data }) => {
            this.getRoles()
          })
        })
        .catch(() => {
          return
        })
    },
  },
  mounted() {
    this.getRoles()
    this.getAuths()
    this.getCompanyFlows()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(100% - 130px);
  padding: 10px;
}

.el-table::before {
  z-index: inherit;
}
</style>